<template>
  <div>
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="form"
        size="medium"
        label-width="150px"
        style="min-width: 1200px"
      >
        <el-col :span="24">
          <el-form-item label="是否启用">
            <el-switch
              v-model="form.iEnable"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="媒体服务">
            <el-radio-group v-model="form.select">
              <el-radio
                :label="item.value"
                v-for="(item, index) in optionsList"
                :key="index"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="图片广告播放模式">
            <el-select
              v-model="form.iPicturePlayMode"
              placeholder="请选择图片广告播放模式"
            >
              <el-option label="顺序播放" :value="0"></el-option>
              <el-option label="随机播放" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="网页广告播放模式">
            <el-select
              v-model="form.iWebsitePlayMode"
              placeholder="请选择网页广告播放模式"
            >
              <el-option label="顺序播放" :value="0"></el-option>
              <el-option label="随机播放" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="视频广告播放模式">
            <el-select
              v-model="form.iVideoPlayMode"
              placeholder="请选择视频广告播放模式"
            >
              <el-option label="顺序播放" :value="0"></el-option>
              <el-option label="随机播放" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button
              type="primary"
              size="medium"
              style="width: 120px"
              @click="submitForm"
              >保存
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>

      <el-col :span="24">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="图片" name="picture">
            <media-picture ref="mediaPictureRef"></media-picture>
          </el-tab-pane>
          <el-tab-pane label="网址" name="web">
            <media-web ref="mediaWebRef"></media-web>
          </el-tab-pane>
          <el-tab-pane label="视频" name="video">
            <media-video ref="mediaVideoRef"></media-video>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getMediaServerSettingApi,
  editMediaServerSettingApi,
} from "@/api/network";
import mediaPicture from "../childrenSub/mediaPicture.vue";
import mediaWeb from "../childrenSub/mediaWeb.vue";
import mediaVideo from "../childrenSub/mediaVideo.vue";
export default {
  components: {
    mediaPicture,
    mediaWeb,
    mediaVideo,
  },
  data() {
    return {
      form: {
        id: "",
        iEnable: 1,
        select: "",
        iPicturePlayMode: 0,
        iWebsitePlayMode: 0,
        iVideoPlayMode: 0,
      },
      optionsList: [
        {
          value: "iPictureEnable",
          label: "使用图片当广告",
        },
        {
          value: "iWebsiteEnable",
          label: "使用网页当广告",
        },
        {
          value: "iVideoEnable",
          label: "使用视频当广告",
        },
      ],
      activeName: "picture",
    };
  },

  created() {
    this.getMediaServerSetting();
    this.$nextTick(() => {
      this.$refs.mediaPictureRef.getMediaPictureSetting();
    });
  },
  mounted() {},

  methods: {
    getMediaServerSetting() {
      getMediaServerSettingApi().then((res) => {
        this.form.id = res.id;
        this.form.iEnable = res.iEnable;
        Object.keys(res).forEach((key) => {
          if (key != "iEnable" && res[key] == 1) {
            if (
              key != "iPicturePlayMode" &&
              key != "iWebsitePlayMode" &&
              key != "iVideoPlayMode"
            ) {
              this.form.select = key;
            }
          }
        });
        this.form.iPicturePlayMode = res.iPicturePlayMode;
        this.form.iWebsitePlayMode = res.iWebsitePlayMode;
        this.form.iVideoPlayMode = res.iVideoPlayMode;
        // console.log(this.form);
      });
    },
    submitForm() {
      let params = {};
      params.iEnable = this.form.iEnable;
      params.id = this.form.id;
      this.optionsList.forEach((item) => {
        params[item.value] = 0;
      });
      params[this.form.select] = 1;
      params.iPicturePlayMode = this.form.iPicturePlayMode;
      params.iWebsitePlayMode = this.form.iWebsitePlayMode;
      params.iVideoPlayMode = this.form.iVideoPlayMode;
      editMediaServerSettingApi(params).then((res) => {
        this.$message.success("保存成功");
      });
    },
    handleClick(tab, event) {
      switch (this.activeName) {
        case "picture":
          this.$nextTick(() => {
            this.$refs.mediaPictureRef.getMediaPictureSetting();
          });

          break;
        case "web":
          this.$nextTick(() => {
            this.$refs.mediaWebRef.getMediaWebsiteSetting();
          });
          break;
        default:
          this.$refs.mediaVideoRef.getMediaVideoSetting();
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
